<template>
    <div class="theme-change">
        <el-dropdown>
            <span class="el-dropdown-link">
                颜色切换
                <i class="el-icon-arrow-down el-icon--right"></i>
            </span>
            <el-dropdown-menu slot="dropdown" class="theme-select">
                <el-dropdown-item
                    v-for="(item, index) in themeColors"
                    :key="item.colorId"
                >
                    <div
                        @click="selectColor(item)"
                        class="theme-item"
                        :style="{ backgroundColor: item.backgroundColor }"
                    >
                        颜色{{ index }}
                    </div>
                </el-dropdown-item>
            </el-dropdown-menu>
        </el-dropdown>
        <el-dropdown>
            <span class="el-dropdown-link">
                边距切换
                <i class="el-icon-arrow-down el-icon--right"></i>
            </span>
            <el-dropdown-menu slot="dropdown" class="theme-select">
                <el-dropdown-item
                    v-for="item in themePadding"
                    :key="item.paddingId"
                >
                    <div @click="selectPadding(item)" class="theme-item">
                        边距{{ item.padding }}
                    </div>
                </el-dropdown-item>
            </el-dropdown-menu>
        </el-dropdown>
    </div>
</template>

<script>
import colors from 'common/modul/theme-colors'
import paddings from 'common/modul/theme-padding'
import { themeModule } from '@/store/modules/theme'

export default {
    data() {
        return {
            themeColors: colors,
            themePadding: paddings
        }
    },
    methods: {
        /** 点击切换颜色 */
        selectColor(item) {
            themeModule.SET_COLOR(item.backgroundColor)
        },
        /** 点击切换边距 */
        selectPadding(item) {
            themeModule.SET_PADDING(item.padding)
        }
    }
}
</script>

<style lang="less" scoped>
/deep/ .theme-change {
    width: 160px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
/deep/ .theme-item {
    width: 100%;
    margin-bottom: 5px;
}
</style>
